目標
在將資料套至Template之前
需要對資料做些過濾與處理
這篇會針對我們需要的畫面結構
做資料處已的設計

步驟
1.
先看一下之前做的線稿
敵人資訊這邊要顯示的畫面
我們需要的資料結構會有以下需求
●資料會先依stageOrder分組(關卡序號分組)
●每關裡又會有數個敵人，以敵人資訊分類(rrn編號分組)
●敵人裡又會有不同行動模式(skill分組)

而原本從Supabase拿過來的資料
架構會長這樣 以下是兩筆範例資料

[
  {
    "stageorder": "01",
    "actionname": "黃昏無夢者",
    "eventname": "黄昏メアレスRe後編",
    "element": "火",
    "species": "魔族",
    "hp": "5000000",
    "angercondition": "場上減員",
    "skillorder": 1,
    "rrn": "000000000501011",
    "skillflag": "一般行動",
    "skill1name": "AD計量條減少"
  },
  {
    "stageorder": "02",
    "actionname": "黃昏無夢者",
    "eventname": "黄昏メアレスRe後編",
    "element": "火",
    "species": "魔族",
    "hp": "5000000",
    "angercondition": "場上減員",
    "skillorder": 2,
    "rrn": "000000000501011",
    "skillflag": "一般行動",
    "skill1name": "一般攻擊"
  }
]

其實上面這樣格式的資料
就是我們在DB查詢時，看到的數個Row的資料
它屬於一維陣列 可以在這邊按下Export->Copy As JSON查看

第一行是第一筆資料，第二行是第二筆資料

我們的需求是
要讓它變成下面這樣的架構

[
  {
    "stageOrder": "01",
    "enemyInfo": [
      {
        "rrn": "000000000501011",
        "element": "火",
        "species": "魔族",
        "hp": "5000000",
        "skill": [
          { "skillFlag": "一般行動", "skillInfo": ["AD計量條減少30","一般攻擊1500"] },
          { "skillFlag": "先制行動", "skillInfo": [] },
          { "skillFlag": "死亡行動", "skillInfo": [] },
          { "skillFlag": "憤怒後先制行動", "skillInfo": [] },
          { "skillFlag": "憤怒後一般行動", "skillInfo": ["亡者的怨念1500+敵方減員數*3000"] },
          { "skillFlag": "憤怒後死亡行動", "skillInfo": [] }
        ]
      },
      {
        "rrn": "000000000501012",
        "element": "雷",
        "species": "魔族",
        "hp": "5000000",
        "skill": [
          { "skillFlag": "一般行動", "skillInfo": ["AS特殊變化3秒以上(傷害減少500)\n4秒以上(複屬性封印)\n5秒以上(C數減少10)\n7秒以上(自傷20)","一般攻擊1500","亡者的怨念1500+敵方減員數*3000"] },
          { "skillFlag": "先制行動", "skillInfo": [] },
          { "skillFlag": "死亡行動", "skillInfo": [] },
          { "skillFlag": "憤怒後先制行動", "skillInfo": [] },
          { "skillFlag": "憤怒後一般行動", "skillInfo": [] },
          { "skillFlag": "憤怒後死亡行動", "skillInfo": [] }
        ]
      }
    ]
  },
  {
    "stageOrder": "02",
    "enemyInfo": [
      {
        "rrn": null,
        "element": "闇",
        "species": "魔族",
        "hp": "10000000",
        "skill": [
          { "skillFlag": "一般行動", "skillInfo": [] },
          { "skillFlag": "先制行動", "skillInfo": [] },
          { "skillFlag": "死亡行動", "skillInfo": [] },
          { "skillFlag": "憤怒後先制行動", "skillInfo": [] },
          { "skillFlag": "憤怒後一般行動", "skillInfo": [] },
          { "skillFlag": "憤怒後死亡行動", "skillInfo": [] }
        ]
      }
    ]
  }
]

所以在A組件這邊先寫一個computed屬性
內部來做處理
將Supabase取得資料的格式做轉換

<script setup>
const stageList = computed(() => {

	const skillFlags = [
		"一般行動",
		"先制行動",
		"死亡行動",
		"憤怒後先制行動",
		"憤怒後一般行動",
		"憤怒後死亡行動"
	];

	// 用 stageOrder 分組
	const stageMap = {};

	result.value.forEach(item => {
	const stage = item.stageorder;
	if (!stage) return;

	if (!stageMap[stage]) {
		stageMap[stage] = {};
	}

	const rrn = item.rrn || "NO_RRN_" + Math.random(); // 處理 null rrn
	if (!stageMap[stage][rrn]) {
		stageMap[stage][rrn] = {
			rrn: item.rrn,
			element: item.element,
			species: item.species,
			hp: item.hp,
			skill: skillFlags.map(flag => ({ skillFlag: flag, skillInfo: [] }))
		};
	}

	if (item.skillflag && item.skill1name) {
		const skillEntry = stageMap[stage][rrn].skill.find(s => s.skillFlag === item.skillflag);
		if (skillEntry) {
			skillEntry.skillInfo.push(
			`${item.skill1name}${item.skill1value ? item.skill1value : ""}`
			);
		}
	}
	});

	return Object.keys(stageMap)
	.sort((a, b) => a.localeCompare(b)) 
	.map(stage => ({
	stageOrder: stage,
	enemyInfo: Object.values(stageMap[stage])
		.sort((a, b) => {
		// 處理 rrn 為 null 的情況
		const rrnA = a.rrn || "";
		const rrnB = b.rrn || "";
		return rrnA.localeCompare(rrnB);
		})
	}));

})
</script>

轉換後的資料stageList 可以印在Template上看一下
然後把這些資料放在JSON Editor上面檢視
左側貼上資料後，按下箭頭，就會幫你排好架構
右側就是我們要的JSON資料格式
到了這一步，最麻煩的資料處理已經告一段落
接下來，我們就能開始寫Template把這些JSON資料套進來就好了

備註
1.
查看JSON架構時
也可以使用其他方便看JSON架構的工具

關於資料的轉換方式有很多種
如果有更好的方法，請在底下留言讓我知道